<!-- 引入 Cesium 并初始化地球 -->
<template>
  <div id="cesiumContainer" class="cesium-container">
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';

// 配置Cesium访问凭证
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTNlOWJkNy01NTU0LTQ3ZWQtYmM3Yi1mNGViODFhOGY3NzQiLCJpZCI6MjgwODczLCJpYXQiOjE3NDEwNzIwNTl9.v7K25kZiBHwarMikqFQEH-NROT27E4JjdsmpUULH4J0";

// Cesium查看器实例
let viewer = null;

// 组件挂载生命周期钩子
onMounted(() => {
  // 初始化Cesium三维地球实例
  viewer = new Cesium.Viewer('cesiumContainer');
  
  /**
   * CZML数据源加载模块
   * 工作流程：
   * 1. 创建CZML数据源实例
   * 2. 从本地服务器加载J2000坐标系下的轨道数据
   * 3. 数据加载成功后添加到查看器数据源集合
   * 4. 实现异常捕获与分类处理
   */
  const czmlDataSource = new Cesium.CzmlDataSource();

  czmlDataSource.load('http://localhost:8080/j2000-orbit-czml')
    .then(dataSource => {
      // 将数据源添加到查看器，触发三维场景更新
      viewer.dataSources.add(dataSource);
      console.log('CZML数据加载成功');
    })
    .catch(error => {
      // 错误处理分层：
      // 第一层：输出原始错误对象
      console.error('CZML数据加载失败:', error);
      // 第二层：针对Cesium特定错误进行分类诊断
      if (error instanceof Cesium.DeveloperError) {
        console.log('可能原因分析：\n1. CZML文件日期格式不符合ISO8601标准\n2. 数据文件路径配置错误\n3. 网络连接异常');
      }
    });
});
</script>
